<template>
    <a-modal v-model:visible="openVisible" :title="props.title" @ok="handleOk" @cancel="handleClose" ok-text="确定"
        cancel-text="取消" :maskClosable="false" style="width: 88%">
        <a-form ref="modelFormRef" :model="formState" :rules="rules" name="basic"
            :class="{ disable: props.title == '查看' ? true : false }" autocomplete="off">
            <div class="title">
                <span class="line"></span>
                <span>基本信息</span>
            </div>
            <a-row type="flex">
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{
                        style:
                            'width: 100px;height:40px;text-align:right;margin-bottom:0px'
                    }" label="评审主题" name="reviewTopics">
                        <a-input v-model:value="formState.reviewTopics" allow-clear placeholder="请输入" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;height:40px;text-align:right' }"
                        label="参与人" name="participants">
                        <a-input v-model:value="formState.participants" allow-clear placeholder="请输入" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;height:40px;text-align:right' }"
                        label="缺席人" name="absentPerson">
                        <a-input v-model:value="formState.absentPerson" allow-clear placeholder="请输入" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;text-align:right' }" label="记录人"
                        name="recorders">
                        <a-input v-model:value="formState.recorders" allow-clear placeholder="请输入" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;text-align:right' }" label="记录时间"
                        name="recordTime">
                        <a-date-picker v-model:value="formState.recordTime" allow-clear value-format="YYYY-MM-DD"
                            style="width: 100%" placeholder="请选择" />
                    </a-form-item>
                </a-col>
            </a-row>

            <div class="title">
                <span class="line"></span>
                <span>项目信息</span>
            </div>
            <a-row type="flex">
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;text-align:right' }" label="项目编号"
                        name="itemNumber">
                        <a-select allow-clear v-model:value="formState.itemNumber" :options="data.project" size="large"
                            placeholder="请选择"></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;text-align:right' }" label="服务名称"
                        name="serviceName">
                        <a-input allow-clear v-model:value="formState.serviceName" placeholder="请输入" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :colon="false" :labelCol="{ style: 'width: 100px;text-align:right' }" label="所属服务单元"
                        name="serviceUnit">
                        <a-select allow-clear v-model:value="formState.serviceUnit" :options="data.project" size="large"
                            placeholder="请选择"></a-select>
                    </a-form-item>
                </a-col>
            </a-row>

            <div class="title">
                <span class="line"></span>
                <span>问题信息</span>
            </div>
            <div class="actions">
                <a-button type="primary" ghost @click="addItem()">
                    <plus-outlined />
                    新增
                </a-button>
            </div>
            <a-row type="flex">
                <a-col :span="24">
                    <div></div>
                    <a-table :columns="columns" :data-source="data.list" :pagination="false" bordered>
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.dataIndex === 'description'">
                                <a-select allow-clear v-model:value="record.description" :options="data.project"
                                    size="large" placeholder="请选择" style="width: 200px"></a-select>
                            </template>
                            <template v-if="column.dataIndex === 'suggested'">
                                <a-input allow-clear v-model:value="record.suggested" placeholder="请输入"
                                    style="width: 200px" />
                            </template>
                            <template v-if="column.dataIndex === 'followPerson'">
                                <a-select allow-clear v-model:value="record.followPerson" :options="data.project"
                                    size="large" placeholder="请选择" style="width: 200px"></a-select>
                            </template>
                            <template v-if="column.dataIndex === 'latestTime'">
                                <a-date-picker v-model:value="record.latestTime" allow-clear value-format="YYYY-MM-DD"
                                    style="width: 200px" placeholder="请选择" />
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <a-button type="link" @click="deleteItem(index)">删除</a-button>
                            </template>
                        </template>
                    </a-table>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>
<script setup lang="ts">
import {
    reactive,
    ref,
    UnwrapRef,
    nextTick,
    onMounted,
    defineProps
} from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
let openVisible = ref<boolean>(false);
const modelFormRef = ref<any>();
const props = defineProps({
    title: {
        type: String,
        default: '',
        required: true
    },
    row: {
        type: Object,
        default: null,
        required: true
    }
});
interface FormState {
    reviewTopics: string;
    participants: string;
    absentPerson: string;
    recorders: string;
    recordTime: undefined;
    itemNumber: undefined;
    serviceName: string;
    serviceUnit: undefined;
    tableList: [];
}
let formState: UnwrapRef<FormState> = reactive({
    reviewTopics: '',
    participants: '',
    absentPerson: '',
    recorders: '',
    recordTime: undefined,
    itemNumber: undefined,
    serviceName: '',
    serviceUnit: undefined,
    tableList: []
});
const rules: Record<string, Rule[]> = {
    reviewTopics: [{ required: true, message: '请输入', trigger: 'blur' }],
    participants: [{ required: true, message: '请输入', trigger: 'blur' }],
    absentPerson: [{ required: true, message: '请输入', trigger: 'blur' }],
    recorders: [{ required: true, message: '请输入', trigger: 'blur' }],
    recordTime: [{ required: true, message: '请输入', trigger: 'blur' }],
    itemNumber: [{ required: true, message: '请选择', trigger: 'change' }],
    serviceName: [{ required: true, message: '请输入', trigger: 'blur' }],
    serviceUnit: [{ required: true, message: '请选择', trigger: 'change' }]
};
const columns = reactive<any>([
    {
        title: '问题描述',
        dataIndex: 'description',
        key: 'description',
        align: 'center'
    },
    {
        title: '修改建议',
        dataIndex: 'suggested',
        key: 'suggested',
        align: 'center'
    },
    {
        title: '跟进人',
        dataIndex: 'followPerson',
        key: 'followPerson',
        align: 'center'
    },
    {
        title: '最晚修复时间',
        dataIndex: 'latestTime',
        key: 'latestTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center'
    }
]);
const data = reactive<any>({
    list: [],
    project: [
        {
            label: '测试测试',
            value: '1'
        }
    ]
});
const addItem = () => {
    let inx = data.list.length - 1;
    if (
        inx >= 0 &&
        data.list[inx].description == undefined &&
        data.list[inx].suggested == '' &&
        data.list[inx].followPerson == undefined &&
        data.list[inx].latestTime == ''
    ) return false;
    data.list.push({
        description: undefined,
        suggested: '',
        followPerson: undefined,
        latestTime: ''
    });

};
const deleteItem = (index: any) => {
    data.list = [...data.list.slice(0, index), ...data.list.slice(index + 1)];
};
const handleOk = () => {
    modelFormRef.value.validate().then((result: any) => {
        if (result) {
            openVisible.value = false;
            emit('onSumbit');
            data.list = [
                {
                    description: undefined,
                    suggested: '',
                    followPerson: undefined,
                    latestTime: ''
                }
            ];
            modelFormRef.value.resetFields();
        }
    });
};
const handleClose = () => {
    openVisible.value = false;
    modelFormRef.value.resetFields();
};
const openModel = () => {
    openVisible.value = true;
    nextTick(() => {
        if (props.title !== '新增') {
            const {
                reviewTopics,
                participants,
                absentPerson,
                recorders,
                recordTime,
                itemNumber,
                serviceName,
                serviceUnit
            } = props.row || {};
            Object.assign(formState, {
                reviewTopics,
                participants,
                absentPerson,
                recorders,
                recordTime,
                itemNumber,
                serviceName,
                serviceUnit
            });
            data.list = props.row.tableList;
        }
    });
};
onMounted(() => { });
const emit = defineEmits(['onSumbit']);
defineExpose({
    openModel
});
</script>
<style scoped lang="less">
.disable {
    pointer-events: none;
}

.title {
    line-height: 22px;
    margin-bottom: 16px;

    .line {
        border-radius: 2px;
        margin-right: 8px;
        height: 14px;
        border: solid 2px#1890ff;
    }

    span {
        display: inline-block;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.88);
        line-height: 20px;
        text-align: left;
        font-style: normal;
        vertical-align: middle;
    }
}

.actions {
    text-align: right;
    margin-bottom: 14px;
}

:deep(.ant-form-item-control-input-content) {
    height: 40px;
}

:deep(.ant-picker-input) {
    height: 40px;
}

:deep(.ant-input-affix-wrapper) {
    padding: 0px 10px;
}

:deep(.ant-picker) {
    height: 40px;
    padding: 0px 10px;

    input {
        height: 30px;
    }
}
</style>
